<template>
  <SideLayout sideTitle="个人中心">
    <template #sider>
      <a-card class="atom-user" :bordered="false">
        <!-- 头像 -->
        <template #cover>
          <a-image :src="userInfo.head"
                   :fallback="headFallback" />
        </template>
        <!-- 信息 -->
        <a-card-meta :title="userInfo.name"
                     :description="userInfo.motto"></a-card-meta>
        <!-- 单位 -->
        <div class="atom-user-extend">
          <p><IconFont type="ApartmentOutlined" /> {{ deptName }}</p>
          <p><IconFont type="EnvironmentOutlined" /> {{ locationName }}</p>
          <a-divider />
          <div class="atom-user-extend-favor">
            <FuncTitle title="常用应用"/>
            <a-avatar-group :maxCount="4" size="large">
              <a-tooltip v-for="(favor, index) in favorList" :title="favor.title" :key="index">
                <a-avatar :style="{ backgroundColor: favor.color }">
                  <template #icon><IconFont :type="favor.icon" /></template>
                </a-avatar>
              </a-tooltip>
            </a-avatar-group>
          </div>
          <a-divider dashed />
          <div class="atom-user-extend-impression">
            <FuncTitle title="印象标签"/>
            <div class="atom-user-extend-tags">
              <a-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</a-tag>
            </div>
          </div>
        </div>
      </a-card>
    </template>
    <template #content>
      <TabList :tabs="newsTabs"
               tabPosition="left"
               :extendParams="{ type: activeTab }"
               @list-tab-change="handleTabChange"></TabList>
    </template>
  </SideLayout>
</template>

<script>
/**
 * 个人中心
 */
import { SideLayout } from '@/layouts'
import user from '@/config/mixins/user'
import FuncTitle from '@/components/Common/FuncTitle'
import { TabList } from '@/components/Advance/FuncList'
export default {
  name: 'UserCenter',
  components: { SideLayout, FuncTitle, TabList },
  mixins: [user],
  data () {
    return {
      // 头像加载失败的默认值
      headFallback: '',
      // 近期常用的功能
      favorList: [
        { icon: 'AlipayCircleOutlined', title: '高级列表', color: '#1890FF' },
        { icon: 'WeiboCircleOutlined', title: '动态表单', color: '#FAAD14' },
        { icon: 'SkypeOutlined', title: '系统设置', color: '#13C2C2' },
        { icon: 'InstagramOutlined', title: '监控大屏', color: '#722ED1' }
      ],
      // 印象标签
      tags: ['梦想家', '亚当术士', 'WOWer~', '达人Show', '厨艺大师', '写点代码'],
      // 当前激活的tab
      activeTab: '1',
      // 系统消息字段
      newsColumns: [
        { key: 'title', title: '标题', dataIndex: 'title',
          optionField: 'status', options: [{ value: 0, count: 'new' }],
          format: 'formatBadge' },
        { key: 'avatar', title: '头像', dataIndex: 'avatar' },
        { key: 'content', title: '消息时间', dataIndex: 'createTime', format: 'formatDate' }
      ],
      // 系统消息类型
      newsType: [
        { key: 1, tab: '待办' },
        { key: 2, tab: '通知' },
        { key: 3, tab: '消息' }
      ]
    }
  },
  computed: {
    // 系统消息tabs
    newsTabs () {
      return this.newsType.map(tab => ({
        ...tab,
        list: {
          apiUrl: this.$api.system.news.HTTP_NEWS_LIST,
          columns: this.newsColumns
        }
      }))
    },
    // 部门名称
    deptName () {
      return (this.userInfo && this.userInfo.sysDept && this.userInfo.sysDept.deptName) || '暂无归属'
    },
    // 所在位置
    locationName () {
      return ((this.userInfo && this.userInfo.locationName) || []).join('.')
    }
  },
  methods: {
    // 响应tab切换
    handleTabChange (activeTab) {
      this.activeTab = activeTab
    }
  }
}
</script>

<style lang="less">
.atom-user {
  .ant-card-cover {
    text-align: center;
    .ant-image {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 20px auto 0 auto;
      border-radius: 50%;
      box-shadow: 0 0 12px 6px #F5EDFC;
      img {
        border-radius: 50%;
      }
    }
  }
  .ant-card-body {
    .ant-card-meta .ant-card-meta-detail {
      text-align: center;
    }
    .atom-user-extend {
      margin-top: 24px;
      p {
        .anticon {
          margin-right: 12px;
        }
      }
      .atom-user-extend-favor {
        margin: 24px 0;
        .ant-avatar-group {
          margin-top: 12px;
          .ant-avatar {
            cursor: pointer;
            margin-right: 24px;
          }
        }
      }
      .atom-user-extend-impression {
        margin: 24px 0;
        .atom-user-extend-tags {
          margin-top: 12px;
          .ant-tag {
            margin-right: 8px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}
</style>
